<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="../common.jsp"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>编辑角色</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="${ctx}/css/public.css" media="all" />
    <link rel="stylesheet" href="${ctx}/js/dtree/dtree/dtree.css">
    <link rel="stylesheet" href="${ctx}/js/dtree/dtree/font/dtreefont.css">

</head>
<body class="childrenBody">
<form class="layui-form" style="width:90%;">

    <div class="layui-col-md9 layui-col-xs7">
        <div class="layui-form-item magt3">
            <label class="layui-form-label">角色名</label>
            <div class="layui-input-block">
                <input type="hidden" value="${requestScope.role.id}" name="roleId">
                <input type="text" class="layui-input roleName" lay-verify="required" name="roleName"  value="${requestScope.role.roleName}" placeholder="请输入角色名">
            </div>
        </div>
    </div>

    <div class="layui-col-md9 layui-col-xs7">
        <label class="layui-form-label">管理的菜单</label>
        <div class="layui-form-item magt3">
            <ul id="demoTree" class="dtree" data-id="0" style="margin-left: 100px;border: 1px solid #ccc"></ul>
        </div>
    </div>

    <div class="layui-form-item layui-row layui-col-xs12" style="margin-top: 20px;">
        <div class="layui-input-block">
            <button class="layui-btn layui-btn-sm" lay-submit="" lay-filter="sub">立即提交</button>
        </div>
    </div>

</form>
<script type="text/javascript" src="${ctx}/layui/layui.js"></script>


<script>
    layui.config({
        base: '${ctx}/js/dtree/dist/' //配置 layui 第三方扩展组件存放的基础目录
    }).extend({
        dtree: 'dtree' //定义该组件模块名
    }).use(['form','layer','layedit','laydate','upload','dtree','element'],function(){
        var form = layui.form,
            layer = parent.layer === undefined ? layui.layer : top.layer,
            dtree = layui.dtree,
            laypage = layui.laypage,
            layedit = layui.layedit,
            $ = layui.jquery;

        dtree.render({
            elem: "#demoTree",  //绑定元素
            <%--url: "${ctx}/json/demoTree.json",  //演示数据--%>
            url: "${ctx}/role/getRoleMenu",
            request: {"roleId": '<c:if test="${requestScope.role.id!=null}">${requestScope.role.id}</c:if>'},
            async: false,  // 只需将该参数设置为false，即可同步加载
            method: "get",
            checkbar: true,
            checkbarType: "all", // 默认就是all，其他的值为： no-all  p-casc   self  only
            nodeIconArray:{"1":{"open":"dtree-icon-pulldown","close":"dtree-icon-pullup"}},  // 自定扩展的二级非最后一级图标，从1开始
            leafIconArray:{"8":"dtree-icon-star"},  // 自定义扩展的二级最后一级图标，从8开始
            icon: ["1","8"], // 使用
            skin: 'layui'
        });


        form.on("submit(sub)",function(data){
            var subData = {};

            var params = dtree.getCheckbarNodesParam("demoTree");
            var menuIds = [];
            if (params) {
                var paramsLength = params.length;
                for (var i = 0; i < paramsLength; i++) {
                    menuIds.push(params[i].nodeId);
                }
            }
            var menuIdsString = menuIds.join(",");
            subData.menuIds = menuIdsString;

            subData.roleName = data.field.roleName;
            subData.roleId = data.field.roleId;
            var roleId = data.field.roleId;
            if (roleId) {
                subData.id = data.field.roleId;
            }

            //弹出loading
            var index = top.layer.msg('数据提交中，请稍候',{icon: 16,time:false,shade:0.8});
            $.ajax({
                url: '${ctx}/role/save',
                type: 'post',
                async: false,
                data: subData,
                dataType: "json",
                success: function (res) {
                    if (res.code == 10200){
                        top.layer.close(index);
                        top.layer.msg("操作成功！",{icon: 6});
                        parent.location.reload();
                    }else {
                        top.layer.msg(res.message,{icon: 5});
                    }
                }, error: function () {
                    top.layer.msg("系统异常！", {icon: 6});
                    top.layer.close(index);
                }
            });
            return false;
        });
    });
</script>
</body>
</html>
